@extends('admin.app')

@section('breadcrumb')
    <div class="bg-light lter b-b wrapper-md">
        <ol class="breadcrumb bg-light lter m-n no-padder">
            <li><a href="{{ admin_action('HomeController@index') }}">主页</a></li>
            <li>网站管理</li>
            <li><a href="{{ admin_action('Web\ArticlesController@index') }}">文章管理</a></li>
            <li class="active">新增文章</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading font-bold">
            文章信息表单
        </div>
        <div class="panel-body">
            <form enctype="multipart/form-data" class="form-horizontal form-validation"
                  action="{{ admin_action('Web\ArticlesController@store') }}"
                  method="post">
                {{ csrf_field() }}
                <div class="form-group">
                    <label class="col-lg-2 control-label">标题*</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="title" value="{{ old('title') }}"
                               placeholder="请输入名称" data-rule-required="true" data-msg-required="优秀的文章怎么可以没有标题呢 O(∩_∩)O哈哈~"
                               data-rule-maxlength="100" data-msg-maxlength="优秀的文章标题不宜太长,以50个字符为宜">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">作者*</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" name="author" value="{{ old('author')??$author }}"
                               placeholder="请填写您的姓名" data-rule-required="true"
                               data-msg-required="优秀的文章怎么可以没有作者呢 O(∩_∩)O哈哈~"
                               data-rule-maxlength="50" data-msg-maxlength="作者的名字课没有那么长哦 O(∩_∩)O哈哈~,最多20个字符">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">发布时间*</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control datetimepicker" name="published_at"
                               value="{{ old('published_at') }}" placeholder="请选择发布时间" data-rule-required="true"
                               data-msg-required="优秀的文章要记得按时发布哦  O(∩_∩)O亲~">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">结束时间*</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control datetimepicker" name="end_at"
                               value="{{ old('end_at') }}" placeholder="请选择发布时间" data-rule-required="true"
                               data-msg-required="优秀的文章要记得按时发布哦  O(∩_∩)O亲~">*没有结束时间，无视它就好了*
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">是否显示*</label>
                    <div class="col-lg-10">
                        <label class="i-checks">
                            <input type="radio" name="display" value="1" checked="checked">
                            <i></i>
                            显示
                        </label>
                        <label class="i-checks">
                            <input type="radio" name="display" value="0">
                            <i></i>
                            不显示
                        </label>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">推荐*</label>
                    <div class="col-lg-10">
                        <label class="i-checks">
                            <input type="radio" name="recommended" value="1">
                            <i></i>
                            推荐
                        </label>
                        <label class="i-checks">
                            <input type="radio" name="recommended" value="0" checked="checked">
                            <i></i>
                            不推荐
                        </label>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">文章类型*</label>
                    <div class="col-lg-10">
                        <label class="i-checks">
                            <input type="radio" name="article_type" value="0" checked="checked">
                            <i></i>
                            文章
                        </label>
                        <label class="i-checks">
                            <input type="radio" name="article_type" value="1">
                            <i></i>
                            页面
                        </label>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">封面图*</label>
                    <div class="col-lg-10">
                        <input type="file" class="form-control" name="image" value="{{ old('image') }}"
                               data-fileinput-image>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">文章分类*</label>
                    <div class="col-lg-10">
                        <select class="select2 form-control" name="article_category_id" data-rule-required="true"
                                data-msg-required="优秀的文章都有一个类别~">
                            <option value="">无</option>
                            @foreach($article_categories as $article_category)
                                <option value="{{ $article_category->id }}">{{ $article_category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">文章标签</label>
                    <div class="col-sm-4">
                        <select class="select2 form-control " name="tags[]" multiple="multiple">
                            <option disabled="disabled">请选择文章标签</option>
                            @foreach($article_tags as $article_tag)
                                <option value="{{ $article_tag->name}}">{{ $article_tag->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <input type="text" class="form-control col-sm-2" placeholder="请输入要添加的标签"
                               id="input_add_article_label"
                               data-request-url="{{ admin_action('Web\ArticlesController@create_tag') }}"/>
                    </div>
                    <div class="col-sm-1">
                        <button type="button" class="btn-primary  form-control text-center" id="btn_add_article_label"
                                disabled="disabled">添加
                        </button>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">内容*</label>
                    <div class="col-lg-10">
                        <script  id="ueditor_container" name="content" type="text/plain">作为一个有情怀的人,总是能够写出优秀的文章! ^_^#</script>
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">排序*</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="sort" value="{{ old('sort')??0 }}"
                               placeholder="请输入排序" data-rule-required="true" data-rule-digits="true">
                    </div>
                </div>
                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">基础描述</label>
                    <div class="col-lg-10">
                        <textarea name="description" placeholder="请填写描述信息" class="form-control"
                                  data-rule-maxlength="100"></textarea>
                    </div>
                </div>

                <div class="line line-dashed b-b line-lg"></div>
                <div class="form-group">
                    <div class="col-lg-4 col-lg-offset-2">
                        <a href="javascript:history.back()"
                           class="btn btn-default">返&nbsp;回</a>
                        <button type="submit" class="btn btn-primary">保&nbsp;存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('scripts')
    @include('admin.partials.ueditor')
    <script>
        $(function () {
            //初始化默认为当前时间
            $('.datetimepicker').val(formatDate(new Date()));
            $('#input_add_article_label').on('input change', function () {
                if ($(this).val()) {
                    $('#btn_add_article_label').attr('disabled', null);
                } else {
                    $('#btn_add_article_label').attr('disabled', 'disabled');
                }
            });
            //添加标签
            $('#btn_add_article_label').on('click', function () {
                var tag = $('#input_add_article_label').val();
                var requestUrl = $("#input_add_article_label").attr("data-request-url");
                $.ajax({
                    url: requestUrl,
                    data: {tag: tag},
                    success: function () {
                        $('#input_add_article_label').val('');
                        swal("温馨提醒", "标签 < " + tag + " > 添加成功", "success");
                        $("select[name='tags[]']").append('<option value="' + tag + '">' + tag + '</option>');
                        $('#btn_add_article_label').attr('disabled', 'disabled');
                    },
                    error: function () {
                        swal("温馨提醒", "标签 < " + tag + " > 添加失败,可能已经存在相同标签,请重试", "error");
                    }
                });
            });
        });
        /**
         * 格式化时间
         *
         * @param now
         * @returns {string}
         */
        function formatDate(now) {
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        }
        ;

    </script>
@endsection